import React,{useState,useEffect} from 'react';
import {Button, Divider} from "antd";

/**
 * 自定义hooks
 * @param initValue
 * @returns {[unknown,setParticle]}
 */
const useParticleState = (initValue)=>{
    let [particleState, setParticleState] = useState(initValue);

    const setParticle = (updateValue)=>{
        setParticleState ({
            ...particleState,
            ...updateValue
        })
    }

    return [particleState,setParticle];
}


/**
 * 自定义hooks
 * @returns {JSX.Element}
 * @constructor
 */
export const HooksByMeComp = function () {

    const [state,setState] = useParticleState({up:0,down:0});

    return (
        <>
            <div>
                支持人数:{state.up}
            </div>

            <div>
                反对人数:{state.down}
            </div>
            <Divider/>
            <Button type={'primary'} onClick={()=>setState({up:state.up+1})}>+</Button>
            <Button type={'primary'} onClick={()=>setState({down:state.down+1})}>-</Button>
        </>
    )

};